<template>
  <el-card class="box-card">
    <el-form :model="addRent" :rules="rules" ref="addRent" label-width="100px" class="demo-ruleForm">
      <el-form-item label="租客姓名" prop="renter">
        <el-input v-model="addRent.renter"></el-input>
      </el-form-item>
      <el-form-item label="租房合同编号" prop="number">
        <el-input v-model="addRent.number" disabled></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="addRent.phone"></el-input>
      </el-form-item>
      <el-form-item label="房源信息" prop="message">
        <el-input v-model="addRent.message"></el-input>
      </el-form-item>
      <el-form-item label="房源类型" prop="typeId">
        <el-select v-model="addRent.typeId" placeholder="房源类型" clearable>
          <el-option :label="item.typeName" :value="item.id" v-for="item in types"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="起租日期" prop="startRent">
        <el-date-picker
            v-model="addRent.startRent"
            type="date"
            value-format="yyyy/MM/dd"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期" prop="endRent">
        <el-date-picker
            v-model="addRent.endRent"
            type="date"
            value-format="yyyy/MM/dd"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="押付方式" prop="oshitsukeType">
        <el-select v-model="addRent.oshitsukeType" placeholder="房源类型" clearable>
          <el-option :label="item.dictionariesName" :value="item.dictionariesName" v-for="item in dictionarie"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="押金" prop="deposit">
        <el-input v-model="addRent.deposit"></el-input>
      </el-form-item>
      <el-form-item label="租金" prop="rental">
        <el-input v-model="addRent.rental"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add('addRent')">租赁</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { v4 as uuidv4 } from 'uuid';
export default {
  name: "AddView",
  data() {
    return{
      types:[],
      dictionarie:[],
      addRent:{
        number:null,
        token:null,
      },
      rules: {
        renter: [
          { required: true, message: '请输入租客姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' }
        ],
        message: [
          { required: true, message: '请输入房源信息', trigger: 'blur' }
        ],
        typeId: [
          { required: true, message: '请选择房源类型', trigger: 'change' }
        ],
        startRent: [
          { required: true, message: '请选择起租日期', trigger: 'change' }
        ],
        endRent: [
          { required: true, message: '请选择结束日期', trigger: 'change' }
        ],
        oshitsukeType: [
          { required: true, message: '请选择押付方式', trigger: 'change' }
        ],
        deposit: [
          { required: true, message: '请输入押金', trigger: 'blur' }
        ],
        rental: [
          { required: true, message: '请输入租金', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    add(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post(this.$monthHost + 'renting/add', this.addRent).then(res => {
            if (res.data.result) {
              this.$message.success('新增成功');
              this.$router.push('/list');
            } else {
              this.$message.error(res.data.msg);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    getType() {
      this.axios.get(this.$monthHost + 'renting/getAllType').then(res=>{
        this.types = res.data.data;
      });
    },
    getAllDictionaries() {
      this.axios.get(this.$monthHost + 'dictionarie/getAllDictionaries').then(res=>{
        this.dictionarie = res.data.data;
      });
    },
    getNumber(){
      this.axios.get(this.$monthHost + 'renting/getNumber').then(res=>{
        this.addRent.number = res.data.data;
      });
    }
  },
  created() {
    this.getType();
    this.getNumber();
    this.getAllDictionaries();
    this.addRent.token = uuidv4();
  }
}
</script>

<style scoped>
.box-card {
  margin-left: 20%;
  margin-right: 20%;
}
</style>